<template>
    <el-main class="main">
        <div class="main-header">
            <div class="header-search">
                <span style="margin-right: 10px;">患者名称:</span>
                <el-input v-model="input" class="w-50 m-2" style="width: 200px;" placeholder="请输入患者姓名">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
                <span>
                    <el-button type="primary" style="margin-left: 15px;" @click="searchPatients">搜索</el-button>
                    <el-button type="primary" style="margin-left: 15px;" @click="resetSearch">重置</el-button>
                </span>
            </div>
        </div>
        <div class="main-body">
            <div>
                <el-button type="primary" style="margin-left: 15px; margin-top: 5px;"  @click="addNewPatient"  >
                    <el-icon>
                        <Plus />
                    </el-icon>新增患者信息
                </el-button>
            </div>
            <el-row>
                <el-col :span="24">
                   
                        <el-table :data="patients" v-loading="loading" style="width: 100%">
                        <el-table-column type="selection" width="50" style="text-align: center;" />
                        <el-table-column label="患者id" style="text-align: center;" prop="pid" />
                        <el-table-column label="患者姓名" style="text-align: center;" prop="patientname" />
                        <el-table-column label="患者联系方式" style="text-align: center;" prop="patienttel" />
                        <el-table-column label="操作" style="text-align: center;" width="160"
                            class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                    @click="editPatient(scope.row)">修改</el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                    @click="deletePatient(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <el-pagination></el-pagination> -->
                    <el-pagination
                    v-model="currentPage"
                    :total="total"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange"
                    />
                </el-col>
            </el-row>
        </div>

        <el-dialog v-model="updatedialogVisible" title="修改病人信息">
            <el-form v-model="form" @submit.prevent="savePatient" label-width="100">
                <!-- 表单内容 -->
                <el-form-item label="患者身份证号" prop="pid">
                    <el-input v-model="form.pid" readonly ></el-input>
                </el-form-item>
                <el-form-item label="患者姓名" prop="patientname">
                    <el-input v-model="form.patientname"></el-input>
                </el-form-item>
                <el-form-item label="患者联系方式" prop="patienttel">
                    <el-input v-model="form.patienttel"></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogVisible" title="新增病人信息" >
            <el-form v-model="form" @submit.prevent="addPatient" label-width="100">
                <!-- 表单内容 -->
                <el-form-item label="患者身份证号" prop="pid">
                    <el-input v-model="form.pid" ></el-input>
                </el-form-item>
                <el-form-item label="患者姓名" prop="patientname">
                    <el-input v-model="form.patientname"></el-input>
                </el-form-item>
                <el-form-item label="患者联系方式" prop="patienttel">
                    <el-input v-model="form.patienttel"></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form>
        </el-dialog>
    </el-main>
   
  
</template>
  
<script setup>
import { ref, onMounted,watch} from 'vue';
import axios from "axios";
import { reactive } from 'vue';
const currentPage = ref(1);
const total = ref(0);
const pageSize = ref(10);
const input=ref('');
// 获取输入框中的患者姓名
const searchPatients = () => {
    const name = input.value; 
  axios.get(`/api/patientoutlist/queryName?name=${name}`)
    .then(res => {
      patients.value = res.data.data;
    })
    .catch(error => {
      console.error(error);
    });
};
// 重置输入框
const resetSearch = () => {
  input.value = ''; 
  selectpatientout();
};

//更换页面
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

watch(currentPage, () => {
  fetchData();
});
//分页
const fetchData = () => {
  axios.get(`/api/patientoutlist/page1?page=${currentPage.value}&pageSize=${pageSize.value}`)
    .then(res => {
      total.value = res.data.data.total;
      // 处理返回数据
      selectpatientout();
       
    });
};

fetchData();

const patients = ref([]);
const form = reactive({
    pid: '',
    patientname: '',
    patienttel: '',
    physicalexamination: '',
    examinationflag: ''
});
const updatedialogVisible = ref(false); // 对话框的可见性
const dialogVisible = ref(false);


const editPatient = (row) => {
    updatedialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
    console.log('修改患者信息', row);
    form.pid = row.pid;
    form.patientname = row.patientname;
    form.patienttel = row.patienttel;
    form.examinationflag = row.examinationflag;
    form.physicalexamination = row.physicalexamination;
    console.log(updatedialogVisible.value);
};


const addNewPatient = (row) => {
    dialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
    console.log('新增患者信息', row);
    console.log(dialogVisible.value);
};
//查找患者
const selectpatientout = () => {
    axios.get(`/api/patientoutlist/page1?page=${currentPage.value}&pageSize=${pageSize.value}`)
        .then(res => {
            patients.value = res.data.data.rows;
            console.log(patients.value);

        })
}

onMounted(() => {
    selectpatientout();
})

const deletePatient = (row) => {
    const pid = row.pid;
    console.log(pid);
    axios.post(`/api/patientoutlist/delete?pid=${pid}`)
        .then(res => {
            selectpatientout();
        })
};
const savePatient = () => {
      // 处理表单的提交逻辑，将 form 对象中的属性值发送给服务端保存患者信息
      axios.post(`/api/patientoutlist/update`, form)
    .then(response => {
      // 保存成功的处理逻辑
      console.log('保存成功', response.data);
      // 关闭弹窗
      updatedialogVisible.value = false;
      form.pid = '';
    form.patientname = '';
    form.patienttel = '';
   form.physicalexamination = '';
   form.examinationflag = '';
      selectpatientout();
    });
}

const addPatient = (row) => {
   
      // 处理表单的提交逻辑，将 form 对象中的属性值发送给服务端保存患者信息
      console.log('提交表单', row);
      axios.post(`/api/patientoutlist/add`, form)
    .then(response => {
      // 保存成功的处理逻辑
      console.log('保存成功', response.data);
      // 关闭弹窗
      dialogVisible.value = false;
      form.pid = '';
    form.patientname = '';
    form.patienttel = '';
   form.physicalexamination = '';
   form.examinationflag = '';
      selectpatientout();
    });
}
</script>
  
<style lang="scss" scoped>
.main {
    height: 100%;
    background-color: rgb(250, 252, 253);


    .main-body {
        margin-top: 14px;
        border-radius: 10px;
        height: calc(86vh - 100px);
        background-color: rgb(255, 255, 255);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .main-header {
        height: 80px;
        border-radius: 10px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        background-color: rgb(255, 255, 255);

        .header-search {
            padding: 10px 0 0 10px;
        }
    }
}</style>
  